// Name:            Article
//
// Description:     Define style for article
//
// Component:       `.am-article`
//
// Sub-objects:     `.am-article-title`
//                  `.am-article-meta`
//                  `.am-article-lead`
//                  `.am-article-divider`
//
// =============================================================================

/* ==========================================================================
   Component: Article
 ============================================================================ */

.@{ns}article {
    .clearfix();
    &> :last-child {
        margin-bottom: 0; // Remove margin from last-child
    }
    &+.@{ns}article {
        margin-top: @article-margin-top;
    }
}


/* Sub-object `.@{ns}article-title` */

.@{ns}article-title {
    // overflow-x: hidden;
    font-size: @article-title-font-size;
    line-height: @article-title-line-height;
    font-weight: @article-title-font-weight;
    a {
        color: inherit;
        text-decoration: none;
    }
    .hook-article-title;
}


/* Sub-object `.@{ns}article-meta` */

.@{ns}article-meta {
    font-size: @article-meta-font-size;
    line-height: @article-meta-line-height;
    color: @article-meta-color;
    .hook-article-meta;
}


/* Sub-object `.@{ns}article-lead` */

.@{ns}article-lead {
    color: @article-lead-color;
    font-size: @article-lead-font-size;
    line-height: @article-lead-line-height;
    border: 1px solid #dedede;
    border-radius: 2px;
    background: #f9f9f9;
    padding: 10px;
    .hook-article-lead;
}


/* Sub-object `.@{ns}article-divider` */

.@{ns}article-divider {
    margin-bottom: @article-divider-margin;
    border-color: @article-divider-border;
    .hook-article-divider;
    *+& {
        margin-top: @article-divider-margin;
    }
}


/* Sub-object `.@{ns}article-bd` */

.@{ns}article-bd {
    blockquote {
        font-family: @font-family-kai;
    }
    img {
        display: block;
        max-width: 100%;
    }
}

// Hooks
// =============================================================================
.hook-article-title() {}

.hook-article-meta() {}

.hook-article-lead() {}

.hook-article-divider() {}